<template>
    <div class="box">
        <div>
            <van-image width="100%" height="15rem" :src="imga" />
        </div>
        <van-notice-bar left-icon="volume-o" text="船员家属直接点击下方《上下外国船舶许可服务指引》查看办理许可的相关流程" />
        <van-nav-bar title="- 边检服务指引 -" />
        <div class="zhinans" @click="gbhd4">
            <div class="span1">
                <div class="nameas">上下外国船舶许可服务指引</div>
                <div class="nameneirs">
                    一、适用范围本指引适用于上下外国船舶许可的申请和办理。二、事项审查类型上下外国船舶许可分为临时上下外国船舶许可和长期上下外国船舶许可。临时许可在本航次或1个月内有效，长期许可有效期为1个月以上1年以下。个人可申请办理临时上下外国船舶许可，单位可申请办理临时或长期上下外国船舶许可。
                </div>
                <div class="namerqs">2023-10-21</div>
            </div>
            <div class="span2">
                <van-image width="90" height="70" :src="imga1" />
            </div>
            <van-divider />
        </div>
        <div class="zhinans" @click="gbhd1">
            <div class="span1">
                <div class="nameas">搭靠外轮许可服务指引</div>
                <div class="nameneirs">
                    一、适用范围本指引适用于船舶搭靠外国船舶许可的申请和办理。二、事项审查类型
                </div>
                <div class="namerqs">2023-10-21</div>
            </div>
            <div class="span2">
                <van-image width="90" height="70" :src="imga2" />
            </div>
            <van-divider />
        </div>
        <div class="zhinans" @click="gbhd2">
            <div class="span1">
                <div class="nameas">港澳台船员及随行家属登陆许可服务指引</div>
                <div class="nameneirs">
                    一、适用范围本指引适用于港澳台船员及随行家属登陆许可服务指引。二、事项审查类型
                </div>
                <div class="namerqs">2023-10-21</div>
            </div>
            <div class="span2">
                <van-image width="90" height="70" :src="imga3" />
            </div>
            <van-divider />
        </div>
        <div class="zhinans" @click="gbhd3">
            <div class="span1">
                <div class="nameas">枪支（弹药）携运许可服务指引</div>
                <div class="nameneirs">
                    一、适用范围本指引适用于枪支（弹药）携运许可服务指引。二、事项审查类型
                </div>
                <div class="namerqs">2023-10-21</div>
            </div>
            <div class="span2">
                <van-image width="90" height="70" :src="imga4" />
            </div>
            <van-divider />
        </div>
        <van-nav-bar title="- 常见错误示例和常见问题解答 -" />
        <div class="xiaf">
            <h3>一、适用范围</h3>
            <p class="acdaa">已取得长期搭靠外轮许可资质的船舶在证件有效期内更换船舶负责人，未向边检机关进行报备。</p>
            <p class="acdaa">正确处理方式：已取得长期搭靠外轮许可资质的船舶负责人更换后，应当向原申请机关报告，并提供船舶负责人身份信息。</p>
            <h3>二、常见问题解答</h3>
            <h5 class="acdaa">（一）搭靠外轮许可的证件遗失或损毁的，如何办理？</h5>
            <p class="acdaa">答：船舶如遗失搭靠证件，或因损毁无法辨认，有可能影响正常使用的，应及时报告签发机关。如工作需要继续使用的，应及时提交补办申请，出入境边防检查站经核实后予以补发。</p>
            <h5 class="acdaa">（二）如原办理的许可过期，再次申领时如何办理？</h5>
            <p class="acdaa">答：如原证件过期，再次申领新证件时，需重新提供搭靠外轮申请。如船舶负责人身份信息和船舶适航类证书、船舶国籍证书等相关资料发生变更的，还需提供更新后的材料。</p>
            <h5 class="acdaa">（三）从事供油、供水、残油回收企业发放相关证明，在办理搭靠外轮许可证件时，是否还需提供该证明？</h5>
            <p class="acdaa">答：不需要。</p>
        </div>
        <div style="height:30px;"></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                imga: require('@/assets/image/wycg.jpg'),
                imga1: require('@/assets/image/lbtd.jpg'),
                imga2: require('@/assets/image/lbte.jpg'),
                imga3: require('@/assets/image/lbtb.jpg'),
                imga4: require('@/assets/image/lbtc.jpg'),
                count: 0,
                isLoading: false,
                show: false,
                show1: false,
                show2: false,
                index: 0,
            };
        },
        methods: {
            onRefresh() {
                setTimeout(() => {
                    this.isLoading = false;
                    this.count++;
                }, 1000);
            },
            onChange(index) {
                this.index = index;
                console.log(234);
            },
            gbhd1() {
                this.$router.push('/dkwlwd')
            },
            gbhd2() {
                this.$router.push('/gatwd')
            },
            gbhd3() {
                this.$router.push('/qzdywd')
            },
            gbhd4() {
                this.$router.push('/sxwgcwd')
            },
            // 图片预览
            jblba1() {
                this.show = true
                // this.$router.push('/dkwlxk')
            },
            jblba2() {
                this.show1 = true
                // this.$router.push('/gatjs')
            },
            jblba3() {
                this.show2 = true
                // this.$router.push('/qzdy')
            },
            jblba4() {
                this.show3 = true
                // this.$router.push('/sxwgc')
            },
            tzwd2() {
                console.log("123");
            }
        },
    };
</script>

<style scoped lang="less">
    .acdaa {
        text-indent: 2em;
        font-size: 19px;
    }

    .xiaf {
        width: 90%;
        margin: 0 auto;
    }

    .box {
        margin: 0;
        padding: 0;
        background-color: #ffffff;
        height: 100vh;

        .axioa {
            margin-bottom: 10px;
        }

        .zhinan {
            background-color: #FFFFFF;

            // border-bottom: #999999 solid 1px;
            .namea {
                width: 90%;
                margin: 0 auto;
                padding: 10px 0 8px 0;
                font-weight: bold;
            }

            .nameneir {
                width: 90%;
                margin: 0 auto;
                padding: 5px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #999999;

            }

            .namerq {
                width: 90%;
                padding: 5px;
                margin: 0 auto;
                color: #999999;
                font-size: 12px;
            }

            .van-divider {
                margin: 0;
            }
        }

        .zhinans {
            background-color: #FFFFFF;
            display: flex;
            align-items: center;

            .span1 {
                width: 71%;
            }

            .span2 {
                // width: 35%;
                top: 5%;
            }

            .nameas {
                width: 90%;
                margin: 0 auto;
                padding: 10px 0 8px 0;
                font-weight: bold;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .nameneirs {
                width: 90%;
                margin: 0 auto;
                padding: 5px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #999999;

            }

            .namerqs {
                width: 90%;
                padding: 5px;
                margin: 0 auto;
                color: #999999;
                font-size: 12px;
            }

            .van-divider {
                margin: 0;
            }
        }
    }

    .boxgrid {
        margin-bottom: 10px;
    }

    .van-image-preview__index {
        width: 215px;
    }

    .notice-swipe {
        height: 40px;
        line-height: 40px;
    }

    .yd {
        margin-top: 2%;
    }
</style>